<%@ page import="cn.js.fan.util.ParamUtil" %>
<%@ page import="com.redmoon.oa.person.UserDesktopSetupDb" %>
<%@ page import="cn.js.fan.util.StrUtil" %>
<%@ page import="com.redmoon.oa.flow.FormDb" %>
<%@ page import="com.cloudwebsoft.framework.util.LogUtil" %>
<%@ page import="com.redmoon.oa.pvg.Privilege" %>
<%@ page import="com.redmoon.oa.visual.*" %>
<%@ page import="cn.js.fan.util.ErrMsgException" %>
<%@ page import="com.redmoon.oa.sys.DebugUtil" %>
<%@ page import="com.alibaba.fastjson.JSONArray" %>
<%@ page import="com.redmoon.oa.flow.FormField" %>
<%@ page import="com.redmoon.oa.flow.FormParser" %>
<%@ page import="com.redmoon.oa.basic.SelectDb" %>
<%@ page import="com.redmoon.oa.basic.SelectOptionDb" %>
<%@ page import="java.util.Vector" %>
<%@ page import="com.redmoon.oa.chart.ChartUtil" %>
<%@ page contentType="text/html;charset=utf-8" %>
<%
    int id = ParamUtil.getInt(request, "id", -1);
    UserDesktopSetupDb udsd = new UserDesktopSetupDb();
    udsd = udsd.getUserDesktopSetupDb(id);
    long chartId = StrUtil.toLong(udsd.getMetaData(), -1);
    if (chartId == -1) {
        out.print("请设置关联的图形");
        return;
    }

    FormDb fdChart = new FormDb();
    fdChart = fdChart.getFormDb(ChartUtil.CONFIG_CHART);
    FormDAO fdaoChart = new FormDAO();
    fdaoChart = fdaoChart.getFormDAO(chartId, fdChart);
    String title = fdaoChart.getFieldValue("title");
    String fieldName = fdaoChart.getFieldValue("field_name");
    String moduleCode = fdaoChart.getFieldValue("module_code");

    ModuleSetupDb msd = new ModuleSetupDb();
    msd = msd.getModuleSetupDb(moduleCode);
    if (msd == null) {
        DebugUtil.e(getClass(), "getModuleSetupDb", "模块：" + moduleCode + "不存在！");
        out.print("模块：" + moduleCode + "不存在！");
        return;
    }
    String formCode = msd.getString("form_code");

    FormDb fd = new FormDb();
    fd = fd.getFormDb(formCode);
    FormField ff = fd.getFormField(fieldName);

    JSONArray arr = null;
    try {
        arr = ChartUtil.getDataForChart(request, msd, fd, ff);
    } catch (ErrMsgException e) {
        out.print(e.getMessage());
        return;
    }
%>
<div id="drag_<%=id%>" class="portlet drag_div bor ibox" style="padding:0;">
    <div id="drag_<%=id%>_h" class="drag-h" style="height:3px;padding:0;margin:0;font-size:1px"></div>
    <div class="ibox-title">
        <div class="chart-title">
            <h5>
                <i class="fa <%=udsd.getIcon()%>"></i>
                <span><%=udsd.getTitle()%></span>
            </h5>
        </div>
    </div>
    <div class="portlet_content ibox-content">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="pieBox<%=id%>" style="width: 360px; height:210px;"></div>
        <script type="text/javascript">
            // 解决ECharts Can't get dom width or height!无法初始化图表的问题
            /*var mainContainer = document.getElementById('pieBox');
            //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeMainContainer = function () {
                mainContainer.style.width = window.innerWidth+'px';
                mainContainer.style.height = window.innerHeight*0.8+'px';
            };
            //设置div容器高宽
            resizeMainContainer();*/

            var myChart = echarts.init(document.getElementById('pieBox<%=id%>'));
            myChart.setOption({
                tooltip : {
                    enterable: true,
                    trigger: 'item',        // 'axis',
                    axisPointer: {          // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'      // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        return params.name+ ":" + params.value + "("+params.percent.toFixed(0)+"%)";
                    }/*,
                    position: function (point, params, dom, rect, size) {
                        // 固定在顶部
                        return [point[0], '10%'];
                    }*/
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show:true,
                            excludeComponents :['toolbox'],
                            pixelRatio: 2
                        }
                    }
                },
                series : [
                    {
                        name: '<%=ff.getTitle()%>',
                        type: 'pie',            // 设置图表类型为饼图
                        radius: '70%',          // 半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        center: ['45%', '50%'], // 位置
                        hoverAnimation: true,　　// 鼠标悬浮是否有区域弹出动画，false:无 true:有
                        label:{                 // 饼图图形上的文本标签
                            normal:{
                                show:true,
                                // position:'inner', //标签的位置
                                textStyle: {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter: '{b}' // {a}{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比;
                                /*formatter:function(data){
                                    // return data.seriesName + "<br/>"+ data.name+ " : " + data.value + " ("+data.percent.toFixed(1)+"%)";
                                    return data.name+ ":" + data.value + "("+data.percent.toFixed(0)+"%)";
                                }*/
                            }
                        },
                        data:<%=arr%>          // 数据数组，name 为数据项名称，value 为数据项值
                    }
                ]
            })

            /*jQuery(window).on('resize',function(){//
                //屏幕大小自适应，重置容器高宽
                resizeMainContainer();
                myChart.resize();
            });*/
        </script>
    </div>
</div>
